<template>
  <div class="container">
    <div class="record">
      <table class="list-table">
        <thead>
        <tr>
          <th>
            <el-button type="text" @click="openAddHotel"><span class="icon add"></span></el-button>
          </th>
          <th>酒店编号</th>
          <th>名称</th>
          <th>星级</th>
          <th>合同号</th>
          <th>开始合作时间</th>
          <th>联系人</th>
          <th>联系方式</th>
          <th>地址</th>
          <th>合同到期日</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>
            <span class="icon del" @click="del(item.id)"></span>
            <!--<span class="icon edit"></span>-->
            <span class="icon det" @click="detail(item.id)"></span>
          </td>
          <td>{{item.code}}</td>
          <td>{{item.name}}</td>
          <td>{{item.star}}</td>
          <td>{{item.numb}}</td>
          <td>{{item.startdate}}</td>
          <td>{{item.contact}}</td>
          <td>{{item.phone}}</td>
          <td>{{item.address}}</td>
          <td>{{item.enddate}}</td>
        </tr>

        </tbody>
      </table>
      <div class="namtc-pagination">
        <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
      <el-dialog title="新建酒店" :visible.sync="pop" size="tiny">
        <el-form :model="ruleForm" :rules="rules" ref="form">
          <el-form-item label="酒店编号" prop="code" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.code" size="small" placeholder="请输入酒店编号"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="名称" prop="name" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.name" size="small" placeholder="请输入名称"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="星级" prop="star" :label-width="width" class="sel">
            <el-select v-model="ruleForm.star" placeholder="请选择" size="small">
              <el-option label="一星" value="一星"></el-option>
              <el-option label="二星" value="二星"></el-option>
              <el-option label="三星" value="三星"></el-option>
              <el-option label="四星" value="四星"></el-option>
              <el-option label="五星" value="五星"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同号" prop="numb" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.numb" size="small" placeholder="请输入合同号"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="开始合作时间" prop="startdate" :label-width="width">
            <el-col :span="span">
              <el-date-picker type="date" size="small" placeholder="选择日期" v-model="ruleForm.startdate"
                              style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人" prop="contact" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.contact" size="small" placeholder="请输入联系人"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.phone" size="small" placeholder="请输入联系电话"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.email" size="small" placeholder="请输入邮箱"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="地址" prop="address" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.address" size="small" placeholder="请输入地址"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="合同到期日" prop="enddate" :label-width="width">
            <el-col :span="span">
              <el-date-picker type="date" size="small" placeholder="选择日期" v-model="ruleForm.enddate"
                              style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="pop = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  const ruleForm = {
    code: '',
    name: '',
    star: '',
    numb: '',
    startdate: '',
    contact: '',
    phone: '',
    email: '',
    address: '',
    enddate: ''
  }
  export default {
    data() {
      return {
        page: 1,
        pageTotal: 0,
        list: [],
        pop: false,
        width: '120px',
        span: 18,
        ruleForm: _g.cloneJson(ruleForm),
        rules: {
          code: [
            { required: true, message: '请填写酒店编号', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请填写酒店名称', trigger: 'blur' }
          ]
        }

      }
    },

    created() {
      this.fetchData()
    },

    methods: {
      fetchData(){
        let data = {
          page: this.page
        }
        this.apiPost('Operation/hotelLists', data).then(res=>{
          this.list = res.list
          this.pageTotal = parseInt(res.total)
        })
      },
      submit() {
        this.pop = false
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.apiPost('Operation/hotelAdd', this.ruleForm).then(res=>{
              let remind = res.error?'error':'success'
              _g.toastMsg(remind, res.msg)
              if(!res.error){
                this.fetchData()
                this.ruleForm = _g.cloneJson(ruleForm)
              }else{
                this.pop = true
              }
            })
          } else {
            this.pop = true
            return false
          }
        });
      },
      openAddHotel(){
        this.ruleForm = _g.cloneJson(ruleForm)
        this.pop = true
        setTimeout(()=>{
          this.$refs.form.resetFields()
        }, 0)
      },

      detail(id) {
        router.push('/operate/supplier/hotelDetail/'+id);
      },
      del(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          }
          this.apiPost('Operation/hotelDelete', data).then(res=>{
            let remind = res.error?'error':'success'
            _g.toastMsg(remind, res.msg)
            if(!res.error){
              this.fetchData()
            }
          })
        }).catch(() => {

        });
      },

      handleCurrentChange(val) {
        this.page = val;
        this.fetchData()
      }
    }
  }
</script>

<style scoped>

  .tit {
    font-size: 18px;
    color: #333;
  }

  .sel {
    text-align: left;
  }

  .two {
    width: 20px;
    background: url(../../../img/excel.gif) no-repeat;
    margin-left: 10px;
  }

  .add {
    width: 25px;
    height: 25px;
    background: url(../../../img/add.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
  }

  .det {
    background: url(../../../img/detail.png) no-repeat;
    cursor: pointer;
  }

  .record {
    background: #FFFFFF;
  }

  .record table thead {
    color: #666666;
  }


</style>
